<template>
  <div class="container order_detail">
    <div class="section">
      <h2 class="title">
        基本信息
      </h2>
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            订单编号：
          </div>
          <div class="detail">
            {{ order_detail.orderId }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目名称：
          </div>
          <div class="detail">
            {{ order_detail.projectName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目分类：
          </div>
          <div class="detail">
            {{ order_detail.projectCategoryName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            医院名称：
          </div>
          <div class="detail">
            {{ order_detail.hospitalName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            医院地址：
          </div>
          <div class="detail">
            {{ order_detail.locationDes }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目原价：
          </div>
          <div class="detail">
            {{ order_detail.price }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目拼团价：
          </div>
          <div class="detail">
            {{ order_detail.groupPrice }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            用户名称：
          </div>
          <div class="detail">
            {{ order_detail.userName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            用户类型：
          </div>
          <div class="detail">
            {{ order_detail.userType == 0 ? '普通':'会员' }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            注册时间：
          </div>
          <div class="detail">
            {{ order_detail.registerDate }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            手机号：
          </div>
          <div class="detail">
            {{ order_detail.userPhone }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            购买类型：
          </div>
          <div class="detail">
            {{ order_detail.buyType == 1?'团购':'单买' }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            生成时间：
          </div>
          <div class="detail">
            {{ order_detail.orderCreateDate }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            支付金额：
          </div>
          <div class="detail">
            {{ order_detail.payAmount }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            订单状态：
          </div>
          <div class="detail">
            {{ order_detail.orderStatusVal }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            订单有效期：
          </div>
          <div class="detail">
            {{ order_detail.orderLimitdate }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            核销码：
          </div>
          <div class="detail">
            {{ order_detail.verificationCode }}
          </div>
        </li>
        <li v-if="order_detail.orderStatus === 1" class="list-item">
          <div class="tip">
            预约时间：
          </div>
          <div class="detail">
            {{ order_detail.appointmentDate }}
          </div>
        </li>
        <li v-if="order_detail.orderStatus === 4 || order_detail.orderStatus === 5" class="list-item">
          <div class="tip">
            退款原因：
          </div>
          <div class="detail">
            {{ order_detail.refundReasonValue }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            是否核销：
          </div>
          <div class="detail">
            {{ order_detail.whetherVerification ===1?'是':'否' }}
          </div>
        </li>
        <li v-if="order_detail.whetherVerification === 1" class="list-item">
          <div class="tip">
            尾款金额：
          </div>
          <div class="detail">
            {{ order_detail.finalPaymentAmount }}
          </div>
        </li>
        <li v-if="order_subsidies !== '0.00'" class="list-item">
          <div class="tip">
            奖励券金额：
          </div>
          <div class="detail">
            {{ order_subsidies }}
          </div>
        </li>
        <li v-if="order_subsidies_status !== null" class="list-item">
          <div class="tip">
            奖励券状态：
          </div>
          <div class="detail">
            {{ order_subsidies_status }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            是否升单：
          </div>
          <div class="detail">
            {{ order_detail.whetherUpgrade ===1?'是':'否' }}
          </div>
        </li>
        <li v-if="order_detail.whetherUpgrade==1" class="list-item">
          <div class="tip">
            升单金额：
          </div>
          <div class="detail">
            {{ order_detail.upgradeAmount }}
          </div>
        </li>
        <li v-if="order_detail.whetherUpgrade === 1" class="list-item">
          <div class="tip">
            升单信息：
          </div>
          <div class="detail">
            <span class="detail-btn">
              <el-popover placement="right" width="600" trigger="click">
                <el-table :data="order_list">
                  <el-table-column
                    property="projectName"
                    align="center"
                    width="160"
                    label="项目名称"
                  />
                  <el-table-column
                    property="amount"
                    align="center"
                    label="项目金额"
                  />
                </el-table>
                <el-button slot="reference">点击查看</el-button>
              </el-popover>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { orderDetail, orderList } from '@/api/order'

export default {
  data() {
    return {
      order_id: 0,
      order_subsidies: null, // 奖励券金额
      order_subsidies_status: null, // 奖励券状态
      order_detail: {},
      project_data: {},
      order_list: [],
      //   分类id
      cate_id: '',
      order_status_arr: [
        '待使用',
        '预约中',
        '预约关闭',
        '已使用',
        '退款中',
        '已退款'
      ]
    }
  },
  created() {
    if (this.$route.query.id) {
      this.order_id = this.$route.query.id
      this.order_subsidies = this.$route.query.subsidies
      this.order_subsidies_status = this.$route.query.subsidiesStatus // 奖励券状态
      if (this.$route.query.subsidiesStatus === 'null') {
        this.order_subsidies_status = null
      }
      if (this.$route.query.subsidiesStatus === '1') {
        this.order_subsidies_status = '待预约'
      }
      if (this.$route.query.subsidiesStatus === '2') {
        this.order_subsidies_status = '待消费'
      }
      if (this.$route.query.subsidiesStatus === '3') {
        this.order_subsidies_status = '待完成'
      }
      if (this.$route.query.subsidiesStatus === '4') {
        this.order_subsidies_status = '待领取'
      }
      if (this.$route.query.subsidiesStatus === '5') {
        this.order_subsidies_status = '已领取'
      }
      if (this.$route.query.subsidiesStatus === '0') {
        this.order_subsidies_status = '未知'
      }
      if (this.$route.query.subsidiesStatus === '11') {
        this.order_subsidies_status = '已失效'
      }

      this.get_detail()
    }
  },
  methods: {
    get_detail() {
      orderDetail({
        id: this.order_id + ''
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.order_detail = res.data
          this.order_detail.orderStatusVal = this.order_status_arr[this.order_detail.orderStatus]
          this.getOrderList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error('服务器网络错误，请稍后重试')
      })
    },
    getOrderList() {
      orderList({
        id: this.order_id + ''
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.order_list = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error('服务器网络错误，请稍后重试')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 120px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 130px;
          text-align: right;
        }
        .detail {
          color: #666;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          //   主图 和 项目展示图 列表
          .pic-list {
            .pic-item {
              display: inline-block;
              vertical-align: middle;
              background-color: #ccc;
              width: 100px;
              height: 100px;
              margin-right: 15px;
              overflow: hidden;
              .img {
                width: 100% !important;
                height: auto;
                display: block;
              }
            }
          }
          //   项目详情图列表
          .detail-list {
            width: 375px;
            border: 1px solid #ccc;
            img {
              width: 100% !important;
              height: auto;
              display: block;
            }
          }
          &.order_detail {
            vertical-align: top;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.order_detail {
  .detail-list {
    width: 375px;
    border: 1px solid #ccc;
    img {
      width: 100% !important;
      height: auto;
      display: block;
    }
  }
}
</style>

